<template>
  <el-col>
    <el-tabs v-model="activeName" type="card">

      <el-tab-pane label="概况" name="1">
        <el-row>
          <el-col :span="24" class="toolbar">
            <el-card>
              <el-date-picker v-model="form.date" type="datetime" placeholder="选择日期时间">
              </el-date-picker>

              <el-select v-model="form.val" placeholder="选择类型">
                <el-option label="水" value="1">
                </el-option>
                <el-option label="电能" value="2">
                </el-option>
              </el-select>

              <el-button type="primary">确定</el-button>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">总成本</h4>
              <div class="c-t-ct" style="color:#20A0FF;">103.4万元</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">同比增长</h4>
              <div class="c-t-ct" style="color:#13CE66;">16.14 %</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">环比增长</h4>
              <div class="c-t-ct" style="color:#13CE66;">18.97 %</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card-tips">
              <h4 class="c-t-title">预警指标</h4>
              <div class="c-t-ct" style="color:#FF4949;">水： 15.7万元</div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-card class="charts-card">
              <div id="chartColumn" style="height:300px;"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chart2" class="base-Charts" style="height:300px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chart3" class="base-Charts" style="height:300px;"></div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chart4" class="base-Charts" style="height:400px;"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card class="charts-card">
              <div id="chart5" class="base-Charts" style=" height:400px;"></div>
            </el-card>
          </el-col>
        </el-row>

      </el-tab-pane>

      <el-tab-pane label="分析预警" name="2">
        <el-card>
          </el-row>
          <el-col :span="16">
            <div id="chart106_2_1" style="width:100%; height:300px;"></div>
          </el-col>
          <el-col :span="8">
            <div id="chart106_2_2" style="width:100%; height:300px;"></div>
          </el-col>
          </el-row>
        </el-card>

        <el-card>
          </el-row>
          <el-col :span="24">
            <div id="chart106_2_3" style="width:100%; height:300px;"></div>
          </el-col>
          </el-row>
        </el-card>
        <el-card>
          <el-row :gutter="20">
            <el-col :span="12" :offset="1">
              <h4>模型预测分析</h4>
              <el-form label-position="left" label-width="80px" :model="formLabelAlign">
                <el-form-item label="电力">
                  <el-slider v-model="formLabelAlign.val1"></el-slider>
                </el-form-item>
                <el-form-item label="水力">
                  <el-slider v-model="formLabelAlign.val2"></el-slider>
                </el-form-item>
                <el-form-item label="气动">
                  <el-slider v-model="formLabelAlign.val3"></el-slider>
                </el-form-item>
              </el-form>
            </el-col>
            <el-col :span="7" :offset="3">
              <el-row>
                <el-col :span="24">
                  <el-card class="card-tips">
                    <h4 class="c-t-title">成本</h4>
                    <div class="c-t-ct" style="color:#20A0FF;">99 万元</div>
                  </el-card>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-card class="card-tips">
                    <h4 class="c-t-title">利润</h4>
                    <div class="c-t-ct" style="color:#20A0FF;">100 万元</div>
                  </el-card>
                </el-col>
              </el-row>

            </el-col>
            <el-col :span="24">
              <el-row style="margin-bottom: 10px;">
                <el-col :span="24">
                  <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
                  </el-input>
                  <el-button type="primary">搜索</el-button>
                  <el-button type="primary">添加模型</el-button>
                  <el-button type="primary">导入</el-button>
                  <el-button type="primary">导出</el-button>
                  <el-button type="primary">运行</el-button>
                  <el-button>复位</el-button>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-table :data="tableData_2_1" border style="width: 100%">
                    <el-table-column prop="name" label="模型名称">
                    </el-table-column>
                    <el-table-column prop="qy" label="公式">
                    </el-table-column>
                    <el-table-column label="投料" align="center">
                      <el-table-column prop="y" label="液体(ml)"></el-table-column>
                      <el-table-column prop="q" label="气体(ml)"></el-table-column>
                      <el-table-column prop="g" label="固体(m³)"></el-table-column>
                    </el-table-column>
                    <el-table-column label="废料" align="center">
                      <el-table-column prop="y" label="废液(ml)"></el-table-column>
                      <el-table-column prop="q" label="废气(ml)"></el-table-column>
                      <el-table-column prop="g" label="固废(m³)"></el-table-column>
                    </el-table-column>
                    <el-table-column prop="cl" label="良品率(%)">
                    </el-table-column>

                    <el-table-column label="状态">
                      <template scope="scope">
                        <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                        </el-switch>
                      </template>
                    </el-table-column>
                    <el-table-column label="推荐值" width="190">
                      <template scope="scope">
                        <el-rate v-model="scope.row.tj" disabled show-text text-color="#ff9900">
                        </el-rate>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="150">
                      <template scope="scope">
                        <el-button type="text" size="small">查看</el-button>
                        <el-button type="text" size="small">编辑</el-button>
                        <el-button type="text" size="small">删除</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-col>
                <el-col :span="24">
                  <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
                  </el-pagination>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
      </el-tab-pane>

      <el-tab-pane label="配置规则" name="3">
         <el-card class="charts-card">
          <el-row style="margin-bottom: 10px;">
            <el-col :span="24">
              <el-input placeholder="条件搜索" icon="search" v-model="form.val" :on-icon-click="handleIconClick" style="width: 200px;">
              </el-input>
              <el-button type="primary">搜索</el-button>
              <el-button type="primary">添加批次</el-button>
              <el-button type="primary">导入</el-button>
              <el-button type="primary">导出</el-button>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-table :data="tableData_3_1" style="width: 100%">
                <el-table-column prop="name" label="批次">
                </el-table-column>
                <el-table-column prop="type" label="类型">
                </el-table-column>
                <el-table-column prop="q" label="区域"></el-table-column>
                <el-table-column prop="y" label="负责人"></el-table-column>
                <el-table-column prop="z" label="方式"></el-table-column>
                <el-table-column label="状态">
                  <template scope="scope">
                    <el-switch v-model="scope.row.status" on-color="#13ce66" off-color="#ff4949" on-value="100" off-value="0">
                    </el-switch>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                  <template scope="scope">
                    <el-button type="text" size="small">查看</el-button>
                    <el-button type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="24">
              <el-pagination :current-page="400" :page-sizes="[100, 200, 300, 400]" :page-size="100" layout="total, sizes, prev, pager, next, jumper" :total="400" style="float:right;margin-top: 10px;">
              </el-pagination>
            </el-col>
          </el-row>
        </el-card>
        <el-row>
          <el-col :span="24">

            <el-table :data="tableData2" style="width: 100%">
              <el-table-column prop="name" label="数据类型">
              </el-table-column>

              <el-table-column prop="address" label="操作">
                <template scope="scope">
                  <el-button type="text" size="small">导入</el-button>
                </template>
              </el-table-column>

            </el-table>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

  </el-col>
</template>

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      activeName: '1',
      formLabelAlign: { val1: 58, val2: 38, val3: 68 },
      tableData: [{
        date: '2016-05-02',
        name: '电力配置',
      }, {
        date: '2016-05-04',
        name: '水量配置',
      }],
      tableData_2_1: [{
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 3.5,
        status: '100',
      }, {
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 3.5,
        status: '0',
      }, {
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 4.5,
        status: '0',
      }, {
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 3.5,
        status: '0',
      }, {
        name: '模型A',
        qy: 'xx',
        q: '21',
        y: '65.87',
        g: '234.1',
        cl: '52',
        tj: 2.5,
        status: '0',
      }],
      tableData2: [{
        date: '2016-05-02',
        name: '产品批次数据导入（材料）',
      }, {
        date: '2016-05-04',
        name: '基础设备成本导入（设备折旧）',
      }, {
        date: '2016-05-04',
        name: '设备维护数据导入（耗材、服务）',
      }, {
        date: '2016-05-04',
        name: '运营成本(人工、物流、管理)',
      }, {
        date: '2016-05-04',
        name: '能源数据导入（动力）',
      }],
      tableData_3_1:[{
        name: '批次',
        type: '电脑主板',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      },{
        name: '批次',
        type: '电脑主板',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      },{
        name: '批次',
        type: '电脑主板',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      },{
        name: '批次',
        type: '电脑主板',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      },{
        name: '批次',
        type: '电脑主板',
        q: '区域A',
        j: '高',
        y: '张工',
        z: '现场调整',
        status: '100',
      }],
      form: {},
      chartColumn: null,
      chart2: null,
      chart3: null,
      chart4: null,
      chart5: null,
      chart6: null,
    }
  },
  methods: {
    drawColumnChart() {
      let dom = document.getElementById('chartColumn')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chartColumn = echarts.init(dom);

      let
        option = {
          title: {
            text: '全动力可视化能耗分析'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {            // 坐标轴指示器，坐标轴触发有效
              type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },

            }
          },
          legend: {
            data: ['液晶', '偏光板', '电能', '特气', '水']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
          },
          series: [
            {
              name: '液晶',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [320, 302, 301, 334, 390, 330, 320]
            },
            {
              name: '偏光板',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '电能',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
              name: '特气',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [150, 212, 201, 154, 190, 330, 410]
            },
            {
              name: '水',
              type: 'bar',
              stack: '总量',
              label: {
                normal: {
                  show: true,
                  position: 'insideRight'
                }
              },
              data: [820, 832, 901, 934, 1290, 1330, 1320]
            }
          ]
        };
      this.chartColumn.setOption(option);
    },
    drawChart2() {
      let dom = document.getElementById('chart2')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart2 = echarts.init(dom);
      let option = {
        title: {
          text: '动力成本对比趋势',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#283b56'
            }
          }
        },
        legend: {
          data: ['全能耗', '总成本']
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },
            restore: {},
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: false,
          start: 0,
          end: 100
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: true,
            data: (function() {
              var now = new Date();
              var res = [];
              var len = 10;
              while (len--) {
                res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
                now = new Date(now - 2000);
              }
              return res;
            })()
          },
          {
            type: 'category',
            boundaryGap: true,
            data: (function() {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(len + 1);
              }
              return res;
            })()
          }
        ],
        yAxis: [
          {
            type: 'value',
            scale: true,
            name: '价格',
            max: 30,
            min: 0,
            boundaryGap: [0.2, 0.2]
          },
          {
            type: 'value',
            scale: true,
            name: '能耗',
            max: 1200,
            min: 0,
            boundaryGap: [0.2, 0.2]
          }
        ],
        series: [
          {
            name: '总成本',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: (function() {
              var res = [];
              var len = 10;
              while (len--) {
                res.push(Math.round(Math.random() * 1000));
              }
              return res;
            })()
          },
          {
            name: '全能耗',
            type: 'line',
            data: (function() {
              var res = [];
              var len = 0;
              while (len < 10) {
                res.push((Math.random() * 10 + 5).toFixed(1) - 0);
                len++;
              }
              return res;
            })()
          }
        ]
      };
      this.chart2.setOption(option);
    },
    drawChart3() {
      let dom = document.getElementById('chart3')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart3 = echarts.init(dom);
      let option = {
        title: {
          text: '单产品成本区域',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['深圳厂区', '广州厂区', '总能耗']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '价格',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '能源',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} 万瓦'
            }
          }
        ],
        series: [
          {
            name: '深圳厂区',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '广州厂区',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '总能耗',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };

      this.chart3.setOption(option);
    },
    drawChart4() {
      let dom = document.getElementById('chart4')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart4 = echarts.init(dom);
      let option = {
        title: {
          text: '多产品成本批次',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['LG显示器', '三星显示器', 'Dell显示器', '总能耗']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '价格',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '能源',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} 万瓦'
            }
          }
        ],
        series: [
          {
            name: 'LG显示器',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '三星显示器',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: 'Dell显示器',
            type: 'bar',
            data: [1.6, 3.9, 8.0, 23.4, 24.7, 68.7, 173.6, 183.2, 47.7, 17.8, 5.0, 2.3]
          },
          {
            name: '总能耗',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
      this.chart4.setOption(option);
    },
    drawChart5() {
      let dom = document.getElementById('chart5')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart5 = echarts.init(dom);
      let option = {
        title: {
          text: '各项明细分类',
          subtext: ''
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['显示屏', '晶体管', '电路板', '总能耗']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '价格',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} 元'
            }
          },
          {
            type: 'value',
            name: '能源',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} 万瓦'
            }
          }
        ],
        series: [
          {
            name: '显示屏',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '晶体管',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '电路板',
            type: 'bar',
            data: [1.6, 3.9, 8.0, 23.4, 24.7, 68.7, 173.6, 183.2, 47.7, 17.8, 5.0, 2.3]
          },
          {
            name: '总能耗',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
      this.chart5.setOption(option);
    },
    drawChart106_2_1() {
      let dom = document.getElementById('chart106_2_1')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart106_2_1 = echarts.init(dom);

      this.chart106_2_1.setOption({
        title: {
          text: '机台&动力&成本联动'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        toolbox: {
          show: true,
          feature: {
            dataView: { readOnly: false },

          }
        },
        legend: {
          data: ['气力', '电能', '特气', '水']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value'
        },
        yAxis: {
          type: 'category',
          data: ['A机台', 'B机台', 'C机台', 'D机台', 'E机台', 'F机台', 'G机台']
        },
        series: [
          {
            name: '气力',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [320, 302, 301, 334, 390, 330, 320]
          },
          {
            name: '电能',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [220, 182, 191, 234, 290, 330, 310]
          },
          {
            name: '特气',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [150, 212, 201, 154, 190, 330, 410]
          },
          {
            name: '水',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'insideRight'
              }
            },
            data: [820, 832, 901, 934, 1290, 1330, 1320]
          }
        ]
      });
    },
    drawChart106_2_2() {
      let dom = document.getElementById('chart106_2_2')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart106_2_2 = echarts.init(dom);

      this.chart106_2_2.setOption({
        title: {
          "subtext": '17%',
          "text": '投产比',
          "x": '50%',
          "y": '45%',
          textAlign: "center",
          "textStyle": {
            "fontWeight": 'normal',
            "fontSize": 24
          },
          "subtextStyle": {
            "fontWeight": 'bold',
            "fontSize": 32,
            "color": '#3ea1ff'
          }
        },
        series: [
          {
            "name": ' ',
            "type": 'pie',
            "radius": ['50%', '70%'],
            "avoidLabelOverlap": false,
            "startAngle": 225,
            "color": ["#9f8fc1", "transparent"],
            "hoverAnimation": false,
            "legendHoverLink": false,
            "label": {
              "normal": {
                "show": false,
                "position": 'center'
              },
              "emphasis": {
                "show": true,
                "textStyle": {
                  "fontSize": '30',
                  "fontWeight": 'bold'
                }
              }
            },
            "labelLine": {
              "normal": {
                "show": false
              }
            },
            "data": [{
              "value": 75,
              "name": '1'
            }, {
              "value": 25,
              "name": '2'
            }]
          },
          {
            "name": '',
            "type": 'pie',
            "radius": ['52%', '68%'],
            "avoidLabelOverlap": false,
            "startAngle": 317,
            "color": ["#fff", "transparent"],
            "hoverAnimation": false,
            "legendHoverLink": false,
            "clockwise": false,
            "itemStyle": {
              "normal": {
                "borderColor": "transparent",
                "borderWidth": "20"
              },
              "emphasis": {
                "borderColor": "transparent",
                "borderWidth": "20"
              }
            }
            ,
            "z": 10,
            "label": {
              "normal": {
                "show": false,
                "position": 'center'
              },
              "emphasis": {
                "show": true,
                "textStyle": {
                  "fontSize": '30',
                  "fontWeight": 'bold'
                }
              }
            },
            "labelLine": {
              "normal": {
                "show": false
              }
            },
            "data": [{
              "value": 63,
              "name": ''
            }, {
              "value": 100 - 63,
              "name": ''
            }
            ]
          }

        ]
      });
    },
    drawChart106_2_3() {
      let dom = document.getElementById('chart106_2_3')
      let existInstance = echarts.getInstanceByDom(dom);
      if (existInstance) {
        return false
        echarts.dispose(existInstance);
      }
      this.chart106_2_3 = echarts.init(dom);

      this.chart106_2_3.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['水能', '电能', '气动', '成本']
        },
        xAxis: [
          {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '动力值',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} W'
            }
          },
          {
            type: 'value',
            name: '成本',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} 万元'
            }
          }
        ],
        series: [
          {
            name: '水能',
            type: 'bar',
            data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3]
          },
          {
            name: '电能',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          }, {
            name: '气动',
            type: 'bar',
            data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]
          },
          {
            name: '成本',
            type: 'line',
            yAxisIndex: 1,
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
            markLine: {
              lineStyle: {
                normal: {
                  type: 'solid',
                  color: 'rgb(180, 180, 180)'
                }
              },
              data: [{
                xAxis: '6月'
              }]
            }
          }
        ]
      });
    },
    // 绘制
    drawCharts() {
      switch (this.activeName) {
        case '1':
          this.drawColumnChart()
          this.drawChart2()
          this.drawChart3()
          this.drawChart4()
          this.drawChart5()
          // this.drawLineChart()
          // this.drawPieChart()
          break;
        case '2':
          this.drawChart106_2_1()
          this.drawChart106_2_2()
          this.drawChart106_2_3()
          break;
        case '3':
          // this.drawSLASJChart()
          break;
        default:
          break
      }
    },
    // 刷新
    resizeAllChart() {
      switch (this.activeName) {
        case '1':
          this.chartColumn.resize()
          this.chart2.resize()
          this.chart3.resize()
          this.chart4.resize()
          this.chart5.resize()
          break;
        case '2':
          this.chart106_2_1.resize()
          this.chart106_2_2.resize()
          this.chart106_2_3.resize()
          break;
        case '3':
          // this.chartSLASJ.resize()
          break;
        default:
          break
      }

    }
  },
  mounted() {
    console.log('mounted')
    this.drawCharts()
    this.$nextTick(() => {
      window.onresize = this.resizeAllChart
    })
  },
  updated() {
    console.log('updated')
    this.drawCharts()
    this.resizeAllChart()
  }

}
</script>

<style scoped>
.el-card {
  margin-bottom: 10px
}
</style>